<template>
	<el-dialog :title="params.fullDateStr+'的台账详情'" :visible.sync="dialogVisible2" width="738px" append-to-body>
		<!-- Header -->
		<div class="mb10">

			<div class="displayFlexBet">
				<div style="color: #3A3EF4;" class="displayFlex mb10 point" @click="editThis">
					<span class="ml10">编辑</span>
				</div>

				<div style="color: #3A3EF4;" class="displayFlex mb10">
					<img src="@/assets/sIcon179.png" style="width: 20px;height: 20px;" />
					<span class="ml10">回今天</span>
				</div>
			</div>

			<div class="displayFlexBet">
				<div style="width: 60px;line-height: 40px;background: #FFFFFF;border-radius: 4px;border: 1px solid #E7E7E7;"
					class="textCenter" @click="nextDay">
					<img src="@/assets/sIcon181.png" style="width: 23px;height: 23px;vertical-align: middle;" />
				</div>
				<div style="background: #E7E7E7;line-height: 40px;width: 100%;" class="textCenter font14 color333">
					{{ params.fullDateStr }}
				</div>
				<div style="width: 60px;line-height: 40px;background: #FFFFFF;border-radius: 4px;border: 1px solid #E7E7E7;"
					class="textCenter" @click="previousDay">
					<img src="@/assets/sIcon180.png" style="width: 23px;height: 23px;vertical-align: middle;" />
				</div>
			</div>
		</div>


		<div v-for="(item,index) in dataList1" :key="item.installationId" class="mb10">
			<div style="background: #FFFFFF;border-radius: 4px;border: 1px solid #E7E7E7;padding: 19px 27px 9px;">
				<div class="displayFlexBet">
					<div class="color333 font14">{{item.installationName}}</div>
					<div class="color888 font14">运行{{item.runHours}}小时</div>
				</div>
				<div class="displayFlex mt10" style="flex-wrap: wrap;">
					<div v-if="item.paramList.length ==0" class="color888 font14">暂无参数</div>
					<div v-for="(item2,index2) in item.paramList" :key="index+index2" class="mr40 mb10 point"
						@click="selectItem1Func(item2,'chart1'+index,index)"
						:class="[(selectItems.some(obj => obj.parameterId === item2.parameterId))?'selected':item2.textColor]">
						<span class="font14">{{item2.parameterName}}：</span>
						<span class="font14">{{item2.statusStr}}</span>
					</div>
				</div>
				<div class="font14" v-if="!selectItems[index].dcsState">
					{{valueDatas[index] || '--'}}{{selectItems[index].unitCode}}
				</div>
			</div>
			<div v-if="item.paramList.length && selectItems[index].dcsState" :id="'chart1'+index"
				style="height: 200px;width: 100%;background: #F3F6F9;border-radius: 4px;border: 1px solid #E7E7E7;">
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import {
		Session
	} from '@/utils/storage';
	import moment from 'moment'
	import * as echarts from 'echarts';

	let that
	export default {
		data() {
			return {
				params: {},
				params2: {},
				dialogVisible2: false,
				recordDet: {},
				currentDate: moment().format('YYYY-MM-DD'),
				dataList1: [],
				selectItems: [],
				valueDatas: [],
			}
		},
		mounted: function() {
			that = this

		},

		methods: {

			editThis() {
				that.$emit('editThis', that.params)
			},

			selectItem1Func(item, chartId, key) {
				that.selectItems[key] = item
				that.getEquipDayParameterAmountList(item, chartId, key)
			},

			open(item) {
				that.params = item
				that.getData()
			},

			getData() {
				that.ajax({
					url: 'productionEquipment/stdBook/getGasOutletRunList',
					contentType: 'application/json',
					data: JSON.stringify({
						outletId: that.params.outletId,
						recordDate: that.params.fullDateStr
					}),
					success: function(result) {
						that.dataList1 = result.data
						that.dialogVisible2 = true
						for (let key in result.data) {
							let item = result.data[key]
							if (item.paramList.length) {
								for (let item2 of item.paramList) {
									if (item2.status == 'NORMAL') item2.textColor = "color888"
									if (item2.status == 'ABNORMAL') item2.textColor = "color-danger"
									item2.installationId = item.installationId
								}
								that.selectItems.push(item.paramList[0])
								that.getEquipDayParameterAmountList(item.paramList[0], "chart1" + key, key)
							}
						}
					},
				})
			},

			getEquipDayParameterAmountList(params, chartId, key) {
				params.recordDate = that.params.fullDateStr

				that.ajax({
					url: '/productionEquipment/stdBook/getEquipDayParameterAmountList',
					contentType: 'application/json',
					data: JSON.stringify(params),
					success: function(result) {
						let data1 = []
						let data2 = []
						for (let item of result.data) {
							data1.push(item.amount)
							data2.push(item.date.split(" ")[1])
						}
						that.formLineData(data1, data2, chartId, key)
						that.valueDatas[key] = (result.data && result.data.length) ? result.data[0].amount : null
						that.$forceUpdate()
					},
				})
			},

			previousDay() {
				this.params.fullDateStr = moment(this.params.fullDateStr).add(1, 'days').format('YYYY-MM-DD')
				that.getData()
			},
			nextDay() {
				this.params.fullDateStr = moment(this.params.fullDateStr).subtract(1, 'days').format('YYYY-MM-DD')
				that.getData()
			},

			goToToday() {
				this.params.fullDateStr = moment().format('YYYY-MM-DD')
				that.getData()
			},

			async formLineData(data1, data2, chartId, key) {
				setTimeout(function() {
					var chartDom = document.getElementById(chartId);
					var myChart = echarts.init(chartDom);
					var option;
					let thisData = that.selectItems[key]
					//thisData.maxDesignValue = 10
					option = {
						tooltip: {
							trigger: 'item',
							axisPointer: {
								type: 'shadow'
							}
						},
						grid: {
							top: "10%",
							bottom: "15%",
							left: "5%"
						},
						xAxis: {
							type: 'category',
							data: data2,
							splitLine: {
								show: false,
							},
							axisTick: {
								show: false // 不显示坐标轴刻度线
							},
							axisLine: {
								lineStyle: {
									opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
								}
							},
						},
						yAxis: {
							type: 'value',
							splitLine: {
								show: true,
								lineStyle: {
									color: ["#FAFBFC"],
								},
							},
							axisTick: {
								show: false // 不显示坐标轴刻度线
							},
							axisLabel: {
								//y轴文字的配置
								textStyle: {
									color: "rgba(215, 215, 215, 1)",
								},
								// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
							},
							axisLine: {
								lineStyle: {
									opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
								}
							},
						},
						series: [{
							data: data1,
							type: 'line',
							label: {
								show: true,
								position: 'top',
								formatter: function(data) {
									if (thisData.maxDesignValue) {
										if (thisData.maxDesignValue < data.value) {
											return '{a|' + data.value + '}'
										}
									}
								},
								rich: {
									'a': {
										color: '#EE6666'
									},
								}
							},
							itemStyle: {
								color: (params) => {
									if (thisData.maxDesignValue) {
										if (thisData.maxDesignValue < params.data) {
											return '#EE6666'
										}
									}
								}
							}
						}]
					};

					option && myChart.setOption(option);
				}, 1000)
			},

		}
	}
</script>

<style scoped>
	.color-danger {
		color: #FE4F00;
	}

	.selected {
		color: #007bff !important;
		font-weight: bold;
	}

	.date-item>>>.el-input__prefix,
	.date-item>>>.el-input__suffix {
		display: none !important;
	}

	.date-item>>>.el-input__inner {
		height: unset !important;
		padding: 0 2px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #555 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 15px !important;
		width: 80px !important;
	}

	.daily-ledger {
		font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
		color: #333;
		background-color: #f7f8fa;
		padding: 15px;
		border: 1px solid #e8e8e8;
		border-radius: 4px;
		max-width: 1000px;
		margin: 20px auto;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10px;
		border-bottom: 1px solid #e8e8e8;
		margin-bottom: 15px;
	}

	.header .title {
		font-size: 18px;
		font-weight: bold;
		color: #303133;
	}

	.date-selector {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.date-selector .date-text {
		font-size: 16px;
		color: #606266;
		margin: 0 5px;
	}

	.arrow-btn,
	.today-btn,
	.close-btn {
		background-color: #fff;
		border: 1px solid #dcdfe6;
		color: #606266;
		padding: 5px 10px;
		border-radius: 4px;
		cursor: pointer;
		font-size: 14px;
		transition: background-color 0.3s, border-color 0.3s;
	}

	.arrow-btn:hover,
	.today-btn:hover,
	.close-btn:hover {
		border-color: #c0c4cc;
		background-color: #f5f7fa;
	}

	.today-btn {
		padding: 5px 8px;
		margin-left: 5px;
	}

	.close-btn {
		font-size: 20px;
		font-weight: bold;
		border: none;
		background: none;
		padding: 0 5px;
	}

	.info-section {
		background-color: #ffffff;
		padding: 15px;
		border-radius: 4px;
		margin-bottom: 15px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.info-row {
		display: flex;
		align-items: center;
		padding: 8px 0;
		font-size: 14px;
	}

	.info-label {
		width: 70px;
		color: #888;
		font-weight: 500;
		flex-shrink: 0;
		margin-right: 20px;
		text-align: right;
		font-size: 14px;
	}

	.info-value {
		flex-grow: 1;
		color: #333;
		background-color: #F3F6F9;
		padding: 18px 17px;
		border-radius: 4px;
	}

	.status-abnormal {
		background-color: #ff6347;
		color: white;
		font-weight: bold;
		text-align: left;
		padding: 18px 17px;
		border-radius: 4px;
		display: inline-block;
		min-width: 60px;
	}

	.status-bar-normal {
		background-color: #007bff;
		color: white;
		padding: 10px 15px;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
		border-radius: 4px;
		margin-bottom: 20px;
	}

	.charts-section {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.chart-container {
		background-color: #ffffff;
		padding: 15px;
		border-radius: 4px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	}

	.chart-header {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: 1px solid #f0f0f0;
		flex-wrap: wrap;
		gap: 15px;
	}

	.chart-title {
		font-size: 16px;
		font-weight: bold;
		color: #303133;
		margin-right: auto;
	}

	.chart-status {
		font-size: 13px;
		color: #606266;
	}

	.chart-status::before {
		content: '•';
		color: #67c23a;
		margin-right: 4px;
		font-size: 16px;
		vertical-align: middle;
	}

	.chart-duration {
		font-size: 12px;
		color: #909399;
		background-color: #f4f4f5;
		padding: 3px 8px;
		border-radius: 10px;
	}

	.chart-body {
		width: 100%;
		height: 250px;
	}
</style>